<style>
    .has_filled_automatically {
        color: orange;
    }


    html, body, section {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        /*overflow: ;*/
    }

    video {
        width: 100%;
        height: 90%;

    }

    ul, li {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }


    #videoBlock {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;


        width: 100%;
        height: max-content;
        max-width: 100%;

        border: green solid 1px;

    }

    #videoBlock li {
        /*width: calc(50% - 5px);*/
        width: 100%;
        height: 240px;
        background: black;
        color: white;
        margin-bottom: 10px;
        justify-content: center;
    }

    .btnCopyWXV {
        width: 50px;
        height: 50px;
    }

    .btnCopyWXV:hover {
        border: #0081C6 solid 1px;
        width: 100px;
        height: 100px;
    }

    .btnCopyWXV:active {
        /*

    {#border: #0081C6 solid 1px;#}   */
        background-color: rgba(255, 0, 0, 0.5);
        transform: translateY(4px);
    }

    #cover {
        width: 100%;
    }

    #cover:hover {
        border: #0081C6 solid 1px;
    }

    #cover:active {
        /*

    {#border: #0081C6 solid 1px;#}    */
        background-color: rgba(255, 0, 0, 0.5);
    }

    #AnalyseBanner {


        position: fixed;
        bottom: 7%;
        /*top: 15%;*/
        height: 70%;
        right: 1px;
        max-width: 48%;
        min-height: 50px;


        z-index: 9999;

        display: flex;
        flex-direction: row;
        background-color: rgba(0, 0, 0, 0.5);
        border: solid 1px;
        color: orange;
        overflow: hidden;
    }

    #ArticleInfo {
        overflow: hidden;
        width: 90%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: #420a0a;
    }

    #btnShowAnalyseBanner {
        width: 10%;
        height: 100%;
    }

    #searchContainer {
        background-color: #933d04;
        height: 10%;
        width: 100%;
    }

    .my_dev {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: center;
        border: solid yellow 1px;
        height: 20%;
    }

    .my_dev input {
        margin: auto;
        height: 100%;
    }

    .my_input {
        width: 60%;
        height: 100%;
        line-height: 100%;
    }


    .my_button {
        width: 40%;
        height: 100%;
    }

    #btnContainer {
        background-color: #4c0658;
        height: 20%;
        width: 100%;
        display: flex;
        flex-direction: row;
        overflow-x: scroll;
    }

    #btnContainer input {
        width: 20%;
    }

    #infoContainer {
        background-color: #265f06;
        height: 70%;
        width: 100%;
    }

    #infoBanner {
        display: flex;
        flex-direction: column;
        border: solid purple 1px;
        width: 100%;
        height: 100%;

    }

    #title_descriptions_cover {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
    }

    .dev_cover {
        justify-content: center;
        height: 60%;
    }

    #dev_btnCopyContainer input {
        width: 100%;
    }

    .tabStyle {
        width: 100%;
        height: 100%;
    }

</style>
<div id="AnalyseBanner">
    <input id="btnShowAnalyseBanner" type="button"
           onClick="showOrHideAnalyseBanner()"
           value="展开"/>
    <div id="ArticleInfo">
        <div id="searchContainer" class="my_dev">
            <input class="my_input" id='article_url' type="text" onchange="Article_url(value)"
                   placeholder="请在这里输入公众号文章的URL">
            <input class="my_button" type="button" onClick="getInfoFromUrl('ARTICLE_URL')" value="解析文章链接"/>
        </div>
        <div id="btnContainer">
            <input type="button" value="0" onclick="switchTab(0)">
            <input type="button" value="1" onclick="switchTab(1)">
            <input type="button" value="2" onclick="switchTab(2)">
            <input type="button" value="3" onclick="switchTab(3)">
            <input type="button" value="4" onclick="switchTab(4)">
            <input type="button" value="5" onclick="switchTab(5)">
            <input type="button" value="6" onclick="switchTab(6)">
            <input type="button" value="7" onclick="switchTab(7)">
            <input type="button" value="8" onclick="switchTab(8)">
            <input type="button" value="9" onclick="switchTab(9)">
            <input type="button" value="10" onclick="switchTab(10)">
            <input type="button" value="11" onclick="switchTab(11)">
        </div>
        <div id="infoContainer">
            <div id="tab0" class="tabStyle" style="display: flex;">
                <div id="infoBanner">
                    <div id="title_descriptions_cover">
                        <div class="my_dev">
                            <input class="my_input" id="articleTitle" type="text"
                                   placeholder="this is title of the articles."/>
                            <input class="my_button" type="button" onClick="copy1('articleTitle','value')"
                                   value="点击复制标题"/>
                        </div>
                        <div class="my_dev">
                            <input class="my_input" id="description" type="text" placeholder="this is descriptions."/>
                            <input class="my_button" type="button" onClick="copy1('description','value')"
                                   value="点击复制描述"/>

                        </div>
                        <div class="dev_cover">
                            <img class="my_input" id="cover" alt="公众号文章封面" title="公众号文章封面"
                                 onclick="show_big_img(this)">
                        </div>
                        <div id="dev_btnCopyContainer" class="my_dev btn btn-default btn-lg">
                            <input class="my_button" type="button" onClick="copy1('cover','src')"
                                   value="点击复制图片链接"/>
                        </div>
{#                        <button type="button" class="btn btn-default" aria-label="Left Align">#}
{#                              <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>#}
{#                            </button>#}
                    </div>
                </div>
            </div>
            <div id="tab1" class="tabStyle" style="display: none;">
                <iframe id="videoSource" frameborder="0"
                        src="http://mpvideo.qpic.cn/0bf2eqaaaaaadeaorqaferpfajgdaasaaaaa.f10002.mp4?dis_k=3e203f520f4e9912d71ab1e09964afb0&dis_t=1608308686"
                        allowFullScreen="true"></iframe>
                <input id="btnCopyVid" class="my_button" type="button"
                       onClick="copyVid(this.value)" value="复制Vid"/>
            </div>
        </div>
    </div>
</div>


<!--<ul id="videoBlock" style="margin-left: 0;">-->
<!--</ul>-->
<template id="templatePerVideoWindow">
    <style>
        .videoTabInnerStyle {
            background-color: darkmagenta;
            display: flex;
            flex-direction: column;
        }

        .videoTabInnerStyle iframe {
            width: 100%;
            height: 80%;
        }

        .videoTabInnerStyle input {
            width: 100%;
            height: 20%;
        }
    </style>
    <div id="tab" class="tabStyle videoTabInnerStyle" style="display: none;">
        <iframe id="videoSource" frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=w3128cb1wio"
                allowFullScreen="true"></iframe>
        <input id="btnCopyVid" class="my_button" type="button"
               onClick="copyVid(this.value)" value="复制Vid"/>
    </div>
</template>
<script>
    var last_selected_tab_id = "#tab0";

    function switchTab(tabIndex) {
        $(last_selected_tab_id).hide();
        last_selected_tab_id = "#tab" + tabIndex;
        console.log("selected tab is :", last_selected_tab_id);
        $(last_selected_tab_id).show();
    }

    function copyVid(vid) {
        console.log("this is copied Vid:", vid);
        copyStr(vid)
    }

    window.onscroll = function () {
        var t = document.documentElement.scrollTop || document.body.scrollTop; //变量t就是滚动条滚动时，到顶部的距离

        var analysePanel = document.getElementById("AnalyseBanner");
        if (t >= 100) {     //当拖动到距离顶部100px处时，左边导航固定，不随滚动条滚动

            // {
            //     #left.style.position = "fixed";
            //     #
            // }
            // {
            //     #left.style.top = "0";
            //     #
            // }


        } else {

            // {
            //     #left.style.position = "absolute";       //恢复正常        #}
            //     {
            //         #
            //         #
            //     }
            //     {
            //         #left.style.top = "100px";
            //         #
            //     }

        }
        var distance = (40 + t + "px");
        console.log("this is t to top:", distance);
        // analysePanel.style.top = distance;
        insertFillUrlButton();
    }
    ;


    var ARTICLE_URL = " You didn't input and have not analyse yet!";
    window.onload = function () {
        // $("#infoBanner").hide();
        // showOrHideInfo();
        showOrHideAnalyseBanner();
    };
    var title_descriptions_cover_isShow = true;

    function showOrHideInfo() {
        if (title_descriptions_cover_isShow) {
            $("#title_descriptions_cover").hide();
            $("#btnShow_title_descriptions_cover").val("展开");
        } else {
            $("#title_descriptions_cover").show();
            $("#btnShow_title_descriptions_cover").val("收起");
        }
        title_descriptions_cover_isShow = !title_descriptions_cover_isShow;
    }

    var analyseBannerIsShow = true;

    function showOrHideAnalyseBanner() {
        if (analyseBannerIsShow) {
            // $("#ArticleInfo").hide("slide", { direction: "right" }, 1000);
            $("#ArticleInfo").animate({
                width: 0,
                direction: 'right'
            });
            $("#btnShowAnalyseBanner").val("展开");
        } else {
            // $("#ArticleInfo").show("slide", { direction: "left" }, 1000);
            $("#ArticleInfo").animate({
                width: "100%",
                direction: 'left',
            });
            $("#btnShowAnalyseBanner").val("收起");
        }
        analyseBannerIsShow = !analyseBannerIsShow;
    }

    function Article_url(value) {
        let element = document.getElementById('article_url');
        element.setAttribute('value', value);
        ARTICLE_URL = value;
        console.log(value, element, ARTICLE_URL);
    }

    function copy1(id, attr) {
        let element = document.getElementById(id);
        copyFromElementAttr(element, attr);
    }

    function initVideoBlock(videosInfoList) {
        var infoBlock = document.getElementById("tab0");
        var tab0 = " <input type=\"button\" value=\"0\" onclick=\"switchTab(0)\">";
        var btnContainer = document.getElementById("btnContainer");
        btnContainer.innerHTML = tab0;
        var infoContainer = document.getElementById('infoContainer');
        infoContainer.innerHTML = "";
        infoContainer.appendChild(infoBlock);
        console.log("all the videos infolist:", videosInfoList);
        for (var i = 0; i < videosInfoList.length; i++) {
            var video = videosInfoList[i];
            var src = video.url_info[0].url;
            var vid = video.vid;
            var templateElem = document.getElementById('templatePerVideoWindow');
            console.log(templateElem);
            var content = document.importNode(templateElem.content, true);
            content.querySelector("#tab").setAttribute('id', 'tab' + (i + 1));
            content.querySelector("#videoSource").setAttribute('src', src);
            content.querySelector("#btnCopyVid").setAttribute('value', vid);
            infoContainer.appendChild(content);
            var tab_i = "<input type=\"button\" value=\"" + (i + 1) + "\" onclick=\"switchTab(" + (i + 1) + ")\">";
            btnContainer.innerHTML += tab_i;
        }
        var analysePanel = document.getElementById("AnalyseBanner");
        analysePanel.style.height = "400px";
    }

    function fill_article_url(_id) {
        var element = $("#" + _id);
        console.log("正在添加url：", element.val(ARTICLE_URL));
        element.addClass('has_filled_automatically');
    }

    function insertFillUrlButton() {
        for (var i = 0; i < 50; i++) {
            var _id = "id_video_set-" + i + "-url";
            var _id_insert = _id + "_insert";
            $("#" + _id_insert).remove();
            var element = $("#" + _id);
            console.log("inserting now...:", _id, element);
            element.after("<img id='" + _id_insert + "' src='https://i.52112.com/icon/jpg/256/20200728/85132/3586519.jpg' style='width: 50px;height: 50px' onClick=\"fill_article_url('" + _id + "')\"></img>")
        }
    }
    function formatParams( params ){
        return "?" + Object
        .keys(params)
        .map(function(key){
          return key+"="+encodeURIComponent(params[key])
        })
        .join("&")
}
    function getInfoFromUrl(id) {


        console.log(ARTICLE_URL);
        insertFillUrlButton();
        var params = {url: ARTICLE_URL}
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/miniProgram/getArticleInfo"+formatParams(params), true);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send();
        xhr.onreadystatechange = (e) => {
            if (xhr.status === 200) {
                json_res = JSON.parse(xhr.responseText);
                console.log("这是从后端解析后得到的：s", json_res);
                let relation =
                    [{id: "articleTitle", attr: "value", json_key: 'title'},
                        {id: "description", attr: "value", json_key: 'description'},
                        {id: 'id_title', attr: "value", json_key: 'title'},
                        {id: 'id_description', attr: "value", json_key: 'description'},
                        {
                            id: 'id_cover_url', attr: "value", json_key:
                                'cover'
                        }
                        ,
                        {
                            id: 'cover', attr:
                                "src", json_key:
                                'cover'
                        }
                        ,
                        {
                            id: 'cover', attr:
                                "value", json_key:
                                'cover'
                        }

                    ]
                ;
                for (var i = 0; i < relation.length; i++) {
                    let id = relation[i].id;
                    try {
                        let element = document.getElementById(id);
                        element.setAttribute(relation[i].attr, json_res[relation[i].json_key]);
                        element.setAttribute('class', 'has_filled_automatically ' + element.getAttribute('class'));
                    } catch (e) {
                        console.log("fill it failed id:", id, 'error:', e)
                    }
                }
                $("#infoBanner").show();
                initVideoBlock(json_res.videos);


                // {
                //     #var
                //     jsonContent = JSON.parse(xhr.responseText);
                //     #
                // }
                // {
                //     #access_token = jsonContent.access_token;
                //     #
                // }
                // {
                //     #h2_accessToken.innerHTML = access_token;
                //     #
                // }
            }
        }
    }
</script>